.card {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 300px;
    height: 390px;

    // 全部绝对定位
    .project {
        position: absolute;
        float: left;
        width: 100px;
        height: 130px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s cubic-bezier(0.68, -.22, .265, 1.22);

        image {
            width: 90px;
            height: 120px;
        }

        .back,
        .front {
            backface-visibility: hidden;
            transform-style: preserve-3d;
            transition: all 1s cubic-bezier(0.68, -.22, .265, 1.22);
            position: absolute;
            left: 5px;
            top: 5px;
            width: 90px;
            height: 120px;
        }

        .front {
            transform: rotateY(0deg);
        }

        .back {
            transform: rotateY(180deg);
        }

        &.flip {
            .back {
                transform: rotateY(0deg);
            }

            .front {
                transform: rotateY(180deg);
            }


        }
    }

    .ani {
        top: 130px !important;
        left: 100px !important;
    }

    // 第一行
    .item0 {
        top: 0px;
        left: 0px;
    }

    .item1 {
        top: 0px;
        left: 100px;
    }

    .item2 {
        top: 0px;
        left: 200px;
    }

    // 第二行
    .item3 {
        top: 130px;
        left: 0px;
    }

    .item4 {
        top: 130px;
        left: 100px;
    }

    .item5 {
        top: 130px;
        left: 200px;
    }

    // 第三行
    .item6 {
        top: 260px;
        left: 0px;
    }

    .item7 {
        top: 260px;
        left: 100px;
    }

    .item8 {
        top: 260px;
        left: 200px;
    }


}
